<template>
  <page-header-wrapper>
    <a-card class="invoicing-theme">
      <a-input-search placeholder="请输入仓库名进行搜索" style="width: 200px; margin-left: 80%;" @search="onSearch" />
      <a-tabs
        @change="callback"
      >
        <a-tab-pane
          v-for="i in provinceList"
          :key="i"
          :tab="`${i}`">
          <warehouseInfo
            :provinceName="province"
            ref="warehouse"
          ></warehouseInfo>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getProvinceList } from '@/api/repoManage'
import warehouseInfo from './components/warehouseInfo.vue'
export default {
  name: 'RepoManage',
  components: { warehouseInfo },
  created () {
    this.getProvince()
  },
  data () {
    return {
      provinceList: [],
      province: null
    }
  },
  methods: {
    getProvince () {
      const _this = this
      getProvinceList()
        .then(res => {
          _this.provinceList = res.data.provinceList
          _this.province = res.data.provinceList[0]
        })
        .catch(err => {
          _this.$message.error(err.response.msg)
        })
        .finally(function () {
        })
    },
    callback (key) {
      this.province = key
    },
    onSearch (value) {
      this.$refs.warehouse[0].search(value)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
